<script setup>
/**
 * @import libs
 */
import { storeToRefs } from 'pinia'

/**
 * @import pinia stores
 */

//pinia -> useGlobalStaticMessStore
import { useGlobalStaticMessStore } from '@/stores/GLOBAL/globalStaticMess'

/**
 * @param buttomBarMessList 底部导航栏数据
 */
let { buttomBarMessList } = storeToRefs(useGlobalStaticMessStore())


//pinia -> useGlobalPageStore 
import { useGlobalPageStore } from '@/stores/GLOBAL/globalPage'

/**
 * @function changeSelectedButtomBar 切换底部导航栏下标
 */
const { changeSelectedButtomBar } = useGlobalPageStore()

/**
* 点击切换底部导航栏下标
* @param e `@click` 事件参数
* @returns 
*/
const handNavButtomBarClick = (e) => {
    //判断数据是否存在
    if (e?.target?.dataset?.index === undefined || e?.target?.dataset?.path === undefined) {
        return
    }

    const index = e.target.dataset.index;//点击底部导航栏的下标
    const path = e.target.dataset.path;//点击底部导航栏对应的跳转页面路径

    //判断类型是否为number
    if (typeof index !== 'number') {
        console.error('index is not a number')
        return
    }

    //判断类型是否为string
    if (typeof path !== 'string') {
        console.error('path is not a string')
        return
    }

    changeSelectedButtomBar(index,path)
}

</script>

<template>
    <div class="bottom-bar">
        <ul class="bottom-bar-list" @click="handNavButtomBarClick">
            <li class="bottom-bar-item" v-for="(item, index) in buttomBarMessList " :key="item.id" >
                <image class="icon-class" :src="item.icon" :data-index="item.id" :data-path="item.path" mode="scaleToFill" />
            </li>
        </ul>
    </div>
</template>

<style scoped>

.bottom-bar-item{
    width: 50rpx;
    height: 50rpx;
}

.bottom-bar {
    background-color: #ffffff;
    border-radius: 64rpx;
    position: fixed;
    bottom: 5vh;
    width: 700rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.bottom-bar-list {
    height: 100rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.icon-class {
    width: 50rpx;
    height: 50rpx;
    position: relative;
}
</style>